<template>
	<view class="detail-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<text class="navbar-title">备忘录详情</text>
				<view class="navbar-right" @click="deleteMemo">
					<text class="delete-icon">✕</text>
				</view>
			</view>
		</view>
		
		<!-- 详情卡片 -->
		<view class="detail-card">
			<!-- 标题区域 -->
			<view class="title-section">
				<text class="memo-title">{{ detail.title || '标题标题标题标题' }}</text>
				<text class="memo-time">{{ formatTime(detail.addtime || detail.add_time) }}</text>
			</view>
			
			<!-- 内容区域 -->
			<scroll-view class="content-section" scroll-y="true">
							<view class="memo-content" v-if="detail.content || html">
				<rich-text :nodes="detail.content || html"></rich-text>
			</view>
			<view class="loading-content" v-else>
				<view class="loading-text">正在加载内容...</view>
				<view class="loading-dots">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
			</view>
			</scroll-view>
		</view>
		
		<!-- 删除确认弹窗 -->
		<view v-if="showDeleteModal" class="modal-overlay" @click="cancelDelete">
			<view class="delete-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">确认删除</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">确定要删除这条备忘录吗？删除后无法恢复。</text>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @click="cancelDelete">
						<text class="btn-text">取消</text>
					</view>
					<view class="modal-btn confirm-btn" @click="confirmDelete">
						<text class="btn-text">删除</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import localStorage from '@/utils/storage.js'

export default {
	data() {
		return {
			detail: {},
			html: '',
			showDeleteModal: false
		}
	},
	onLoad(op) {
		this.id = op.id
		this.getInfo()
	},
	methods: {
		getInfo() {
			if (!localStorage.isLoggedIn()) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					showCancel: false,
					success: () => {
						uni.navigateTo({
							url: '/pages/public/login'
						});
					}
				});
				return;
			}
			
			// 使用本地存储获取备忘录详情
			const result = localStorage.getMemoDetail(this.id);
			
			if (result.success) {
				this.detail = result.data;
				this.html = result.data.content;
			} else {
				uni.showToast({
					title: result.message || '备忘录不存在',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		
		formatTime(time) {
			if (!time) return '';
			const date = new Date(time);
			return date.toLocaleString();
		},
		
		goBack() {
			uni.navigateBack()
		},
		
		deleteMemo() {
			this.showDeleteModal = true
		},
		
		cancelDelete() {
			this.showDeleteModal = false
		},
		
		confirmDelete() {
			// 使用本地存储删除备忘录
			const result = localStorage.deleteMemo(this.id);
			
			if (result.success) {
				uni.showToast({
					title: result.message,
					icon: 'success'
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} else {
				uni.showToast({
					title: result.message || '删除失败',
					icon: 'none'
				});
			}
			
			this.showDeleteModal = false;
		}
	}
}
</script> 
<style lang="scss" scoped>
.detail-container {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	z-index: 0;
}

.custom-navbar {
	position: relative;
	z-index: 1;
	height: 88rpx;
	margin-top: var(--status-bar-height);
	background: transparent;
	padding-top: 60rpx;
}

.navbar-content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-left:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.back-icon {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.navbar-right {
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 107, 107, 0.9);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-right:active {
	background: rgba(255, 107, 107, 1);
	transform: scale(0.95);
}

.delete-icon {
	font-size: 32rpx;
	color: #fff;
	font-weight: bold;
}

.detail-card {
	flex: 1;
	position: relative;
	z-index: 1;
	background: #ffffff;
	border-radius: 40rpx 40rpx 0 0;
	margin: 20rpx 20rpx 0;
	box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.title-section {
	padding: 60rpx 40rpx 30rpx;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.memo-title {
	display: block;
	font-size: 48rpx;
	font-weight: 600;
	color: #333;
	line-height: 1.3;
	margin-bottom: 20rpx;
	word-wrap: break-word;
}

.memo-time {
	display: block;
	font-size: 26rpx;
	color: #999;
}

.content-section {
	flex: 1;
	padding: 0 40rpx 40rpx;
}

.memo-content {
	padding-top: 30rpx;
	font-size: 32rpx;
	line-height: 1.8;
	color: #333;
}

.default-content {
	display: block;
	font-size: 32rpx;
	line-height: 1.8;
	color: #333;
	text-align: justify;
}

/* 富文本样式优化 */
.memo-content :deep(p) {
	margin-bottom: 20rpx;
	line-height: 1.8;
}

.memo-content :deep(img) {
	max-width: 100%;
	height: auto;
	border-radius: 12rpx;
	margin: 20rpx 0;
}

.memo-content :deep(h1),
.memo-content :deep(h2),
.memo-content :deep(h3) {
	font-weight: 600;
	margin: 30rpx 0 20rpx;
	color: #333;
}

.memo-content :deep(ul),
.memo-content :deep(ol) {
	padding-left: 40rpx;
	margin: 20rpx 0;
}

.memo-content :deep(li) {
	margin-bottom: 10rpx;
	line-height: 1.6;
}

.memo-content :deep(blockquote) {
	background: #f8f9fa;
	border-left: 6rpx solid #a6c0fe;
	padding: 20rpx;
	margin: 20rpx 0;
	border-radius: 8rpx;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.delete-modal {
	width: 600rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
}

.modal-header {
	padding: 40rpx 40rpx 20rpx;
	text-align: center;
}

.modal-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.modal-body {
	padding: 20rpx 40rpx 40rpx;
	text-align: center;
}

.modal-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.modal-footer {
	display: flex;
	border-top: 1rpx solid #eee;
}

.modal-btn {
	flex: 1;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.cancel-btn {
	border-right: 1rpx solid #eee;
}

.cancel-btn:active {
	background: #f8f9fa;
}

.confirm-btn {
	background: #ff6b6b;
}

.confirm-btn:active {
	background: #ff5252;
}

.btn-text {
	font-size: 30rpx;
	font-weight: 500;
}

.cancel-btn .btn-text {
	color: #666;
}

.confirm-btn .btn-text {
	color: #fff;
}

/* 加载动画样式 */
.loading-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 40rpx;
	text-align: center;
}

.loading-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 30rpx;
}

.loading-dots {
	display: flex;
	gap: 10rpx;
}

.dot {
	width: 12rpx;
	height: 12rpx;
	background: #a6c0fe;
	border-radius: 50%;
	animation: bounce 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) {
	animation-delay: -0.32s;
}

.dot:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes bounce {
	0%, 80%, 100% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
}
</style>